<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <style>
    
    #screen{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    z-index:9998;
    background:#666;
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    }
     
    .popBox{
    width: 360px;
	height: 330px;
    background:#008800;
    border:0px #ffffff solid;
    padding:0px 0px 0px 0px
    position:absolute;
    top:0;
    left:0;
    display:none;
    z-index:9999;
    }
    .popBox .tit {
	font-size: 24px;
	color: #fff;
	font-weight: 400;
	line-height: 100%;
	margin-bottom: 20px;
   }
   .popBox .item {
	margin-bottom: 24px;
    }
      .popBox em{
    padding:2px 5px;
    position:absolute;
    right:10px;
    top:10px;
    background:#333;
    color:#fff;
    }
   
    </style>
 <div id="screen"></div>
<div class="popBox" >
						<form method="post" action="${pageContext.request.contextPath }/j_spring_security_check" name="loginForm" id="logingForm" onsubmit='return checkEmpty(this);' >
						<div class="p_20">
							<h3 class="tit">欢迎登录</h3>
							<p class="item"><input style="width:70%;" class="input_style1" type="text" name="j_username" id="j_username" placeholder="请输入您的账号"></p>
							<p class="item"><input style="width:70%;" class="input_style1" type="password" name="j_password" id="j_password" placeholder="请输入密码">
							<p class="item"><input style="width:30%;" class="input_style1" type="text" name="validateCode" id="sms_img_code" placeholder="获取验证码">
							<a href="javascript:void(0);" style="text-align:justify;"><img style="vertical-align:middle;" src="${pageContext.request.contextPath }/codeImage" alt="点击更换图片" onclick="changeImage();" id="validateCodeImg" width="90" /></a>
							</p>
							<p class="item"><input style="width:98%;" class="btn_red01" type="submit" value="立即登录"></p>
							  <em>关闭</em>
						</div>
						</form>
				
					</div>
					<script type="text/javascript">
				
						function showLoginPage() {
							var h = $(document).height();
							$('#screen').css({
								'height' : h
							});
							$('#screen').show();
							$('.popBox').center();
							$('.popBox').fadeIn();

						}
						function hideLoginPage() {
							$(".loginBar").hide();
						}
						function changeImage() {
							$('#validateCodeImg').hide().attr(
									'src',
									'${pageContext.request.contextPath }/codeImage?'
											+ Math.floor(Math.random() * 100))
									.fadeIn();
							event.cancelBubble = true;
						}
						function checkEmpty(f){
				if (f.j_username.value=='')
				{
					//alert('请输入用户名！');
					$.dialog.alert({title:"登陆",content:"请输入账号！",objCtrl:"#j_username"});
					f.j_username.focus();
					return false;
				}
				if (f.j_password.value=='')
				{
					//alert('请输入密码！');
					$.dialog.alert({title:"登陆",content:"请输入密码！",objCtrl:"#j_password"});
					f.j_password.focus();
					return false;
				}
				if (f.sms_img_code.value=='')
				{
					//alert('请输入图片验证码！');
					$.dialog.alert({title:"登陆",content:"请输入图片验证码！",objCtrl:"#sms_img_code"});
					f.sms_img_code.focus();
					return false;
				}
				return true;

			}
					</script>
		<script type="text/javascript">
    $('.popBox em').click(function(){
    $('.popBox').fadeOut(function(){ $('#screen').hide(); });
    return false;
    });
   
     
    //下面是居中的插件。
    jQuery.fn.center = function(loaded) {
    var obj = this;
    body_width = parseInt($(window).width());
    body_height = parseInt($(window).height());
    block_width = parseInt(obj.width());
    block_height = parseInt(obj.height());
    left_position = parseInt((body_width/2) - (block_width/2) + $(window).scrollLeft());
    if (body_width<block_width) { left_position = 0 + $(window).scrollLeft(); };
    top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop())-200;
    if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };
    if(!loaded) {
    obj.css({'position': 'absolute'});
    obj.css({ 'top': top_position, 'left': left_position });
    $(window).bind('resize', function() {
    obj.center(!loaded);
    });
    $(window).bind('scroll', function() {
    obj.center(!loaded);
    });
    } else {
    obj.stop();
    obj.css({'position': 'absolute'});
    obj.animate({ 'top': top_position }, 50, 'linear');
    }
    }
    </script>